<template>
  <PageContainer>
    <template #header>
      <el-tabs v-model="activeName">
        <el-tab-pane label="字典类型" name="1"></el-tab-pane>
        <el-tab-pane label="字典数据" name="2" disabled></el-tab-pane>
      </el-tabs>
    </template>
    <keep-alive>
      <div v-if="activeName === '1'">
        <el-card style="margin-bottom: 16px;">
          <SearchForm :form-list="searchList" :search-param="searchInfo" @search="handleSearch" @reset="handleReset"  />
        </el-card>

        <el-card>
          <div style="margin-bottom: 10px;">
            <el-button type="primary" @click="showDialog()">新增</el-button>
          </div>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column v-for="item in columns" :key="item.prop" :label="item.label" :prop="item.prop"
              :width="item.width">
              <template slot-scope="{ row }">
                <template v-if="item.prop === 'status'">
                  {{ row[item.prop] === 1 ? '正常' : '停用' }}
                </template>
                <template v-else>
                  <span :class="{ 'text-blue': item.prop === 'dictType' }" @click="clickCell(row, item.prop)">{{
                    row[item.prop] }}</span>
                </template>
              </template>
            </el-table-column>
            <el-table-column label="操作" prop="action" width="200">
              <template slot-scope="{ row }">
                <el-button type="text" @click="showDialog(row)">编辑</el-button>
                <el-button type="text" @click="handleRemove(row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination style="margin-top: 16px; text-align: right" :current-page.sync="pagData.pageNum"
            :page-size.sync="pagData.pageSize" :total="pagData.total" :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </el-card>
      </div>
    </keep-alive>
    <DictData v-if="activeName === '2'" :dictType="activeRow.dictType" />

    <DialogForm 
      :visible="visible"
      :title="title"
      :form-list="formList"
      :formData="formData" 
      :onSubmit="onSubmit"
      @cancel="handleClose"
      @ok="handleOk"
    />
  </PageContainer>
</template>

<script>
import SearchForm from '../components/SearchForm.vue';
import DictData from './components/DictData.vue';
import DialogForm from './components/DialogForm.vue';
import {
  getDictTypeList,
  addDictType,
  updateDictType,
  deleteDictType,
} from "@/api/dict.js";

export default {
  name: "SystemDict",
  components: {
    SearchForm,
    DictData,
    DialogForm
  },
  data() {
    return {
      activeName: '1',
      columns: [
        {
          label: "字典名称",
          prop: "dictName",
        },
        {
          label: "字典类型",
          prop: "dictType",
        },
        {
          label: "状态",
          prop: "status",
        },
        {
          label: "备注",
          prop: "remark",
        },
      ],
      tableData: [],
      searchList: [
        {
          valueType: "input",
          key: "dictName",
          label: "字典名称",
        },
        {
          valueType: "select",
          key: "status",
          label: "字典状态",
          options: [
            {
              label: "正常", value: 1
            },
            {
              label: "停用", value: 0
            },
          ]
        },
      ],
      searchInfo: {
        dictName: "",
        status: "",
      },
      pagData: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      // 弹窗
      visible: false,
      title: "",
      formList: [
        {
          label: "字典名称",
          valueType: "input",
          key: "dictName",
          rules: [{ required: true, message: "请输入名称", trigger: "blur" }]
        },
        {
          label: "字典类型",
          valueType: "input",
          key: "dictType",
          rules: [{ required: true, message: "请输入字典类型", trigger: "blur" }]
        },
        {
          label: "状态",
          valueType: "select",
          key: "status",
          options: [
            { label: "正常", value: 1 },
            { label: "停用", value: 0 },
          ],
          rules: [{ required: true, message: "请选择状态", trigger: "change" }]
        },
        {
          label: "备注",
          valueType: "input",
          key: "remark",
        },
      ],
      // 表单
      formData: {},
      //
      activeRow: {}
    };
  },
  created() {
    this.getTableData()
  },
  methods: {
    getTableData() {
      const { pageNum, pageSize } = this.pagData
      const params = {
        ...this.searchInfo,
        pageNum,
        pageSize
      }
      getDictTypeList(params).then(res => {
        this.tableData = res.data.list
        this.pagData.total = res.data.total
      })
    },
    handleSearch() {
      this.pagData.pageNum = 1
      this.getTableData()
    },
    handleReset() {
      this.searchInfo = Object.assign({}, this.$options.data().searchInfo)
    },
    handleCurrentChange(pageNum) {
      this.pagData.pageNum = pageNum;
      this.getTableData();
    },
    handleSizeChange(pageSize) {
      this.pagData.pageSize = pageSize;
      this.pagData.pageNum = 1;
      this.getTableData();
    },
    showDialog(row) {
      if (!row) {
        this.title = "添加";
      } else {
        this.title = "编辑";
        this.formData = { ...row }
      }
      this.visible = true;
    },
    onSubmit(params) {
      const func =  this.title === '添加' ? addDictType : updateDictType
      return func(params)
    },
    handleOk() {
      this.handleClose();
      this.getTableData();
    },
    // 弹窗关闭事件
    handleClose() {
      this.visible = false;
    },
    handleRemove(row) {
      this.$confirm("确定删除所选项吗？", "提示", { type: "warning" })
        .then(() => {
          deleteDictType(row.id).then(() => {
            this.getTableData();
          });
        })
        .catch(() => { });
    },
    clickCell(row, prop) {
      if (prop === 'dictType') {
        this.activeRow = { ...row }
        this.$nextTick(() => {
          this.activeName = '2'
        })
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.text-blue {
  cursor: pointer;
  color: #409eff;
}
</style>
